<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('myQuotes.queryCondition')}}</span></el-col><!--查询条件-->
      </el-row>
      <el-form :inline="true" :model="listQuery" style="padding: 0 20px">
        <el-row style="padding-bottom: 10px">
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('myQuotes.bdName')}}</div><!--商机/工务名称-->
              <el-input :placeholder="$t('placeholder.choose')" v-model="listQuery.bdName"></el-input><!--请输入-->
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('myQuotes.quotesTime')}}</div><!--报价时间-->
              <el-date-picker style="width: 100%" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="listQuery.startDate" type="daterange" range-separator="-" :start-placeholder="$t('placeholder.startDate')" :end-placeholder="$t('placeholder.endDate')"></el-date-picker>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('myQuotes.customerName')}}</div><!--客户名称-->
              <el-select v-model="listQuery.clientName" :placeholder="$t('placeholder.choose')" multiple><!--请选择-->
                <el-option v-for="item in customerList" :key="item.id" :label="item.customerName" :value="item.customerName"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4" style="margin-top: 32px">
            <div type="primary" class="yt-btn yt-btn-ys" @click="handleFilter">{{$t('button.query')}}</div><!--查询-->
            <div type="primary" class="yt-btn yt-ml8" @click="reset">{{$t('button.reset')}}</div><!--重置-->
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="data-list">
      <el-row class="list-content">
        <el-col><span>{{$t('myQuotes.myQuotesInfo')}}</span></el-col><!--我的报价单讯息-->
      </el-row>
      <el-table :data="list" :empty-text="$t('placeholder.emptyText')" style="width: 100%;margin-top: 10px" border class="yt-table" v-loading.body="listLoading" :key="tableKey" max-height="600">
        <el-table-column type="index" align="center" :label="$t('myQuotes.num')" width="60"></el-table-column><!--序号-->
        <el-table-column align="center" :label="$t('myQuotes.bdName')"><!--商机/工务名称-->
          <template slot-scope="scope">
            <div style="text-decoration: underline;color: #0000ff;cursor: pointer;" type="primary" @click="handleUpdate(scope.row)">{{ scope.row.bdName }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('myQuotes.createTime')" prop="createTime" class-name="pd"/><!--首次报价时间-->
        <el-table-column align="center" :label="$t('myQuotes.updateTime')" prop="updateTime" class-name="pd"/><!--最后一次报价时间-->
        <el-table-column align="center" label="Client" prop="clientName" class-name="pd"/>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="listQuery.page"
          :page-sizes="[10, 20, 30, 50, 100, 200]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import myOffeReq from '@/api/myOffe';
  import customerReq from '@/api/customer';

  export default {
    name: 'myQuotes',
    data() {
      return {
        tableKey: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10,
          bdName: '',
          clientName: []
        },
        total: 0,
        list: [],
        customerList: []
      };
    },
    mounted() {
      this.getList();
      this.getCustomerList(); // 获取客户名称
    },
    methods: {
      getCustomerList() {
        this.listLoading = true;
        customerReq.allNotDeletList().then(response => {
          this.customerList = response.data;
          this.listLoading = false;
        });
      },
      getList() {
        this.listLoading = true;
        if (this.listQuery.startDate && this.listQuery.startDate.length > 0) {
          this.listQuery.startTime = this.listQuery.startDate[0];
          const date = new Date(this.listQuery.startDate[1])
          const after = new Date(date.setDate(date.getDate() + 1))
          this.listQuery.endTime = `${after.getFullYear()}-${after.getMonth() + 1}-${after.getDate()}`
        }
        myOffeReq.page(this.listQuery).then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        });
      },
      handleUpdate(row) {
        if (row.type === 0) {
          // 0：需求，1：专案
          this.$router.push({
            path: '/demandManager/demandQuotation',
            query: { title: 'myQuotes', id: row.id }
          });
        } else {
          this.$router.push({
            path: '/progressManager/businessManager',
            query: { title: 'myQuotes', id: row.id }
          });
        }
      },
      handleFilter() {
        this.getList();
      },
      reset() {
        this.listQuery = {
          page: 1,
          limit: 10,
          bdName: '',
          clientName: []
        };
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      }
    }
  };
</script>
<style scoped>
</style>
